<div id="vueBox" class="content" v-cloak>
    <input type="hidden" id="category_id" value="{notempty name='$row'}{$row.category_id}{else/}{$category_id}{/notempty}">
    <input type="hidden" id="id" value="{notempty name='$row'}{$row.id|htmlentities}{/notempty}">
    <input type="hidden" id="c-title" value="{notempty name='$row'}{$row.title|htmlentities}{/notempty}">
    <input type="hidden" id="c-content" value="{notempty name='$row'}{$row.content|htmlentities}{/notempty}">

    <div class="row" style="margin: 20px 0;">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">标题</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-remark" class="form-control" name="row[remark]" type="text"
                       value="{notempty name='$row'}{$row.remark|htmlentities}{/notempty}">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table">
                <thead>
                <tr>
                    <th>行数</th>
                    <th style="font-weight: bold;color: #18bc9c;">数字</th>
                    <th v-for="(val,idx) in thead">
                        <input style="width: 80px;" type="number" @keyup.enter="col_change" v-model="thead[idx]" :data-idx="idx" >
                    </th>
                    <th v-if="thead.length<10"><input style="width: 80px;" type="number" v-model="newCol" @keyup.enter="add_col()"></th>
                    <th style="width: 100px;text-align: center;">附表</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(val,idx) in lines" :style="state.indexOf(idx)>-1 && data_show?'background:#fa9085;':''">
                    <td style="font-weight: bold;color: #979897;">{{idx+1}}</td>
                    <td style="font-weight: bold;color: #18bc9c;">
                        <input style="width: 80px;" type="number" @keyup.enter="line_change" v-model="tbody[idx]" :data-idx="idx" >
                    </td>
                    <td v-for="v in val">
                        {{data_show?v:'*'}}
                    </td>
                    <td v-if="state.indexOf(idx)>-1" @click="showAttach(idx)" style="width: 100px;cursor: pointer">
                        <span v-if="data_show">首{{tbody.length}}尾{{idx+1}}得{{tbody.length-idx}}</span>
                    </td>
                </tr>
                <tr>
                    <td style="font-weight: bold;color: #979897;">{{lines.length+1}}</td>
                    <td>
                        <input style="width: 80px;" type="number" v-model="newVal" @keyup.enter="add_line()">
                    </td>
                    <td v-for="v in thead"></td>
                    <td><div style="width: 100px;"></div></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row" style="margin-top: 50px;">
        <div class="col-xs-12 col-md-2">
            <button  class="btn btn-primary btn-embossed" @click="submit()">提交</button>
        </div>
        <div class="col-xs-12 col-md-2">
            <button  class="btn btn-primary btn-embossed" @click="update_data()">更新</button>
        </div>
    </div>
</div>


<style>
    [v-cloak] {
        display: none
    }
    .table{
        margin-top: 20px;
        max-height: 200px;
        margin-left: 7px;
    }
    .table tr th{
        width: 50px;
        text-align: center;
    }
    .table tr th input{
        text-align: center;
    }
    .table tr td{
        width: 50px;
        text-align: center;
    }
    .table tr td input{
        text-align: center;
    }
</style>
